<template>
<div style="margin-top: 15px;background-color: white" >
  <a-list
      item-layout="horizontal"
      :data-source="data"
      :loading="initLoading"
  >
    <template #renderItem="{ item }">
      <a-list-item>
        <template #actions>
          <a @click="handleEdit(item.title)">编辑</a>
          <a-popconfirm title="确定删除吗？" @confirm="handleDelete(item.title)" ok-text="是" cancel-text="否">
            <a  style="color: red">删除</a>
          </a-popconfirm>
        </template>

<!--        <a-list-item-meta-->
<!--            description="Ant Design, a design language for background applications, is refined by Ant UED Team"-->
<!--        >-->
        <a-list-item-meta>
          <template #title>
            <strong>{{ item.title }}</strong>
          </template>
          <template #avatar>
            <a-avatar src="https://joeschmoe.io/api/v1/random" />
          </template>
        </a-list-item-meta>
      </a-list-item>
    </template>
  </a-list>
</div>
</template>

<script setup>

import {onMounted, ref,inject} from "vue";
import request from "@/utils/request";
import {useStore} from "vuex";
import {useRouter} from "vue-router";


const initLoading=ref(false)
const data = ref([])
const store=useStore()
const router=useRouter()
const iinject=inject('reload')

onMounted(()=>{
  initLoading.value=true
  request.get("draft/getlist").then(res=>{
    console.log(res)
    data.value=res.data
    initLoading.value=false
  })
})

const handleEdit=(title)=>{
  store.commit(
      'setIsReturn',
      {
        isRe:true,
        rePath:"/admin/draft"
      })
  router.push("/admin/essay/add/"+title)
}
const handleDelete=(title)=>{

  initLoading.value=true
  request.get("draft/delete/"+title).then(res=>{
    console.log(res)
    iinject()
    initLoading.value=false
  })
}
</script>
